<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>我的成长 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #e63946;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 等级总览卡片 */
    .level-overview {
      background: linear-gradient(135deg, #e63946, #ff6b6b);
      color: white;
      border-radius: 12px;
      padding: 20px 15px;
      margin: 15px;
      box-shadow: 0 4px 12px rgba(230, 57, 70, 0.2);
      position: relative;
      overflow: hidden;
    }
    
    .overview-bg {
      position: absolute;
      right: -20px;
      top: -20px;
      font-size: 120px;
      opacity: 0.1;
      font-weight: bold;
    }
    
    .level-badge {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.2);
      margin: 0 auto 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid white;
      position: relative;
      z-index: 2;
    }
    
    .level-number {
      font-size: 28px;
      font-weight: 700;
    }
    
    .level-name {
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 5px;
      position: relative;
      z-index: 2;
    }
    
    .exp-progress {
      margin: 15px 0;
      position: relative;
      z-index: 2;
    }
    
    .progress-text {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      margin-bottom: 8px;
    }
    
    .progress-bar-container {
      height: 8px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 4px;
      overflow: hidden;
    }
    
    .exp-bar {
      height: 100%;
      background-color: white;
      border-radius: 4px;
    }
    
    .level-benefit {
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      text-align: center;
      margin-top: 10px;
      position: relative;
      z-index: 2;
    }
    
    /* 内容导航 */
    .content-nav {
      display: flex;
      background-color: white;
      margin: 0 15px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .nav-item {
      flex: 1;
      padding: 15px 0;
      text-align: center;
      font-size: 15px;
      font-weight: 500;
      color: #666;
      border-bottom: 2px solid transparent;
    }
    
    .nav-item.active {
      color: #e63946;
      border-bottom-color: #e63946;
    }
    
    /* 内容区域 */
    .content-section {
      display: none;
    }
    
    .content-section.active {
      display: block;
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      padding: 15px 15px 5px;
      color: #333;
    }
    
    /* 经验值任务区 */
    .tasks-container {
      margin: 10px 15px;
    }
    
    .task-card {
      background-color: white;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .task-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .task-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 20px;
    }
    
    .icon-post {
      background-color: #457b9d;
    }
    
    .icon-interact {
      background-color: #1d3557;
    }
    
    .icon-community {
      background-color: #8ecae6;
    }
    
    .icon-challenge {
      background-color: #fb8500;
    }
    
    .task-details {
      flex: 1;
    }
    
    .task-title {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 3px;
    }
    
    .task-desc {
      font-size: 12px;
      color: #999;
    }
    
    .task-action {
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
    }
    
    .btn-complete {
      background-color: #f5f5f5;
      color: #999;
      border: none;
    }
    
    .btn-get {
      background-color: #ffebee;
      color: #e63946;
      border: none;
    }
    
    /* 经验记录 */
    .records-container {
      background-color: white;
      margin: 10px 15px;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      overflow: hidden;
    }
    
    .record-day {
      padding: 12px 15px;
      font-size: 14px;
      color: #666;
      background-color: #f9f9f9;
    }
    
    .record-item {
      padding: 12px 15px;
      border-bottom: 1px solid #f5f5f5;
      display: flex;
      justify-content: space-between;
    }
    
    .record-item:last-child {
      border-bottom: none;
    }
    
    .record-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .record-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }
    
    .record-exp {
      background-color: #e63946;
    }
    
    .record-details {
      flex: 1;
    }
    
    .record-title {
      font-size: 15px;
      margin-bottom: 2px;
    }
    
    .record-time {
      font-size: 12px;
      color: #999;
    }
    
    .record-exp {
      font-weight: 500;
      color: #e63946;
    }
    
    /* 等级体系 */
    .levels-container {
      margin: 10px 15px;
    }
    
    .level-card {
      background-color: white;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      position: relative;
      overflow: hidden;
    }
    
    .level-card.current {
      border: 2px solid #e63946;
    }
    
    .level-card.locked::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.7);
      z-index: 1;
    }
    
    .level-lock {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
      color: #ccc;
      z-index: 2;
    }
    
    .level-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .level-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .level-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 18px;
      font-weight: 700;
    }
    
    .level-title {
      font-size: 16px;
      font-weight: 600;
    }
    
    .level-required {
      font-size: 13px;
      color: #666;
    }
    
    .level-perks {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    
    .perk-tag {
      background-color: #f8f9fa;
      padding: 3px 10px;
      border-radius: 12px;
      font-size: 12px;
      color: #555;
    }
    
    .perk-tag.highlight {
      background-color: #ffebee;
      color: #e63946;
    }
    
    /* 成长路径 */
    .path-container {
      background-color: white;
      margin: 10px 15px;
      border-radius: 12px;
      padding: 15px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .path-item {
      position: relative;
      padding-left: 30px;
      padding-bottom: 20px;
      margin-bottom: 10px;
      border-left: 2px dashed #eee;
    }
    
    .path-item:last-child {
      border-left: 2px dashed transparent;
      padding-bottom: 0;
      margin-bottom: 0;
    }
    
    .path-milestone {
      position: absolute;
      left: -9px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #e63946;
      z-index: 2;
    }
    
    .path-item.completed .path-milestone {
      background-color: #4cc9f0;
    }
    
    .path-item.future .path-milestone {
      background-color: #ccc;
    }
    
    .path-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .path-desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
    }
    
    .path-reward {
      display: inline-block;
      background-color: #f8f9fa;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 12px;
      color: #e63946;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .bottom-nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .bottom-nav-item.active {
      color: #e63946;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 空状态 */
    .empty-state {
      padding: 60px 20px;
      text-align: center;
      color: #999;
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 15px;
      color: #ddd;
    }
    
    .empty-text {
      font-size: 16px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-white" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">我的成长</h1>
    <div class="text-white">
      <i class="fa fa-trophy"></i>
    </div>
  </div>
  
  <!-- 等级总览卡片 -->
  <div class="level-overview">
    <div class="overview-bg">LV</div>
    <div class="level-badge">
      <div class="level-number">8</div>
    </div>
    <div class="level-name">探索者</div>
    <div class="exp-progress">
      <div class="progress-text">
        <span>当前经验: 1,280/2,000</span>
      </div>
      <div class="progress-bar-container">
        <div class="exp-bar" style="width: 64%"></div>
      </div>
      <div class="progress-text">
        <span>距离下一等级还需: 720经验</span>
      </div>
    </div>
    <div class="level-benefit">
      <i class="fa fa-unlock-alt"></i> 已解锁: 发布高清长文权限
    </div>
  </div>
  
  <!-- 内容导航 -->
  <div class="content-nav">
    <div class="nav-item active" data-tab="tasks">每日任务</div>
    <div class="nav-item" data-tab="records">经验记录</div>
    <div class="nav-item" data-tab="levels">等级体系</div>
    <div class="nav-item" data-tab="growth">成长路径</div>
  </div>
  
  <!-- 每日任务区域 -->
  <div class="content-section active" id="tasks">
    <h3 class="section-title">日常经验任务</h3>
    <div class="tasks-container">
      <div class="task-card">
        <div class="task-info">
          <div class="task-icon icon-post">
            <i class="fa fa-pencil"></i>
          </div>
          <div class="task-details">
            <div class="task-title">发布动态</div>
            <div class="task-desc">发布1条原创动态内容</div>
          </div>
        </div>
        <button class="task-action btn-get">+50经验</button>
      </div>
      
      <div class="task-card">
        <div class="task-info">
          <div class="task-icon icon-interact">
            <i class="fa fa-comments"></i>
          </div>
          <div class="task-details">
            <div class="task-title">互动交流</div>
            <div class="task-desc">评论或回复5位用户</div>
          </div>
        </div>
        <button class="task-action btn-get">+30经验</button>
      </div>
      
      <div class="task-card">
        <div class="task-info">
          <div class="task-icon icon-community">
            <i class="fa fa-users"></i>
          </div>
          <div class="task-details">
            <div class="task-title">社区参与</div>
            <div class="task-desc">加入或活跃于兴趣小组</div>
          </div>
        </div>
        <button class="task-action btn-complete">已完成</button>
      </div>
      
      <div class="task-card">
        <div class="task-info">
          <div class="task-icon icon-challenge">
            <i class="fa fa-bolt"></i>
          </div>
          <div class="task-details">
            <div class="task-title">每日挑战</div>
            <div class="task-desc">完成3个小任务获得额外奖励</div>
          </div>
        </div>
        <button class="task-action btn-get">+100经验</button>
      </div>
    </div>
    
    <h3 class="section-title">成长挑战</h3>
    <div class="tasks-container">
      <div class="task-card">
        <div class="task-info">
          <div class="task-icon icon-post" style="background-color: #2a9d8f;">
            <i class="fa fa-calendar-check-o"></i>
          </div>
          <div class="task-details">
            <div class="task-title">连续创作</div>
            <div class="task-desc">连续7天发布原创内容</div>
          </div>
        </div>
        <button class="task-action btn-get">+500经验</button>
      </div>
      
      <div class="task-card">
        <div class="task-info">
          <div class="task-icon icon-interact" style="background-color: #e9c46a;">
            <i class="fa fa-star"></i>
          </div>
          <div class="task-details">
            <div class="task-title">内容受欢迎</div>
            <div class="task-desc">单条内容获得50个以上点赞</div>
          </div>
        </div>
        <button class="task-action btn-get">+300经验</button>
      </div>
    </div>
  </div>
  
  <!-- 经验记录区域 -->
  <div class="content-section" id="records">
    <div class="records-container">
      <div class="record-day">今天</div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon record-exp">
            <i class="fa fa-pencil"></i>
          </div>
          <div class="record-details">
            <div class="record-title">发布原创动态</div>
            <div class="record-time">10:23</div>
          </div>
        </div>
        <div class="record-exp">+50</div>
      </div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon record-exp">
            <i class="fa fa-users"></i>
          </div>
          <div class="record-details">
            <div class="record-title">加入摄影兴趣小组</div>
            <div class="record-time">09:15</div>
          </div>
        </div>
        <div class="record-exp">+20</div>
      </div>
      
      <div class="record-day">昨天</div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon record-exp">
            <i class="fa fa-comments"></i>
          </div>
          <div class="record-details">
            <div class="record-title">评论互动</div>
            <div class="record-time">18:42</div>
          </div>
        </div>
        <div class="record-exp">+30</div>
      </div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon record-exp">
            <i class="fa fa-bolt"></i>
          </div>
          <div class="record-details">
            <div class="record-title">完成每日挑战</div>
            <div class="record-time">15:30</div>
          </div>
        </div>
        <div class="record-exp">+100</div>
      </div>
      
      <div class="record-day">2023-10-25</div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon record-exp">
            <i class="fa fa-trophy"></i>
          </div>
          <div class="record-details">
            <div class="record-title">内容获得精选推荐</div>
            <div class="record-time">14:22</div>
          </div>
        </div>
        <div class="record-exp">+200</div>
      </div>
    </div>
    
    <div class="text-center py-4">
      <button class="btn btn-light px-4 py-2 rounded-pill">
        <i class="fa fa-history mr-1"></i> 查看更多记录
      </button>
    </div>
  </div>
  
  <!-- 等级体系区域 -->
  <div class="content-section" id="levels">
    <div class="levels-container">
      <div class="level-card">
        <div class="level-header">
          <div class="level-info">
            <div class="level-icon" style="background-color: #adb5bd;">1</div>
            <div>
              <div class="level-title">新手</div>
              <div class="level-required">0-200 经验值</div>
            </div>
          </div>
        </div>
        <div class="level-perks">
          <span class="perk-tag">基础发帖权限</span>
          <span class="perk-tag">浏览社区内容</span>
        </div>
      </div>
      
      <div class="level-card">
        <div class="level-header">
          <div class="level-info">
            <div class="level-icon" style="background-color: #4cc9f0;">2</div>
            <div>
              <div class="level-title">入门</div>
              <div class="level-required">201-500 经验值</div>
            </div>
          </div>
        </div>
        <div class="level-perks">
          <span class="perk-tag">上传图片权限</span>
          <span class="perk-tag">加入2个兴趣小组</span>
        </div>
      </div>
      
      <!-- 省略部分等级... -->
      
      <div class="level-card current">
        <div class="level-header">
          <div class="level-info">
            <div class="level-icon" style="background-color: #e63946;">8</div>
            <div>
              <div class="level-title">探索者</div>
              <div class="level-required">1,001-2,000 经验值</div>
            </div>
          </div>
        </div>
        <div class="level-perks">
          <span class="perk-tag highlight">发布高清长文</span>
          <span class="perk-tag highlight">创建话题讨论</span>
          <span class="perk-tag highlight">自定义个人主页</span>
        </div>
      </div>
      
      <div class="level-card">
        <div class="level-header">
          <div class="level-info">
            <div class="level-icon" style="background-color: #f72585;">9</div>
            <div>
              <div class="level-title">创作者</div>
              <div class="level-required">2,001-5,000 经验值</div>
            </div>
          </div>
        </div>
        <div class="level-perks">
          <span class="perk-tag">发布视频内容</span>
          <span class="perk-tag">创建兴趣小组</span>
          <span class="perk-tag">内容数据分析</span>
        </div>
      </div>
      
      <div class="level-card locked">
        <div class="level-lock"><i class="fa fa-lock"></i></div>
        <div class="level-header">
          <div class="level-info">
            <div class="level-icon" style="background-color: #5b21b6;">10</div>
            <div>
              <div class="level-title">达人</div>
              <div class="level-required">5,001-10,000 经验值</div>
            </div>
          </div>
        </div>
        <div class="level-perks">
          <span class="perk-tag">专属身份标识</span>
          <span class="perk-tag">优先内容推荐</span>
          <span class="perk-tag">社区活动特权</span>
        </div>
      </div>
    </div>
    
    <div class="text-center py-4">
      <button class="btn btn-light px-4 py-2 rounded-pill">
        <i class="fa fa-list mr-1"></i> 查看完整等级体系
      </button>
    </div>
  </div>
  
  <!-- 成长路径区域 -->
  <div class="content-section" id="growth">
    <div class="path-container">
      <div class="path-item completed">
        <div class="path-milestone"></div>
        <div class="path-title">首次登录</div>
        <div class="path-desc">完成账号注册并首次登录平台</div>
        <div class="path-reward">+20经验值 +新手徽章</div>
      </div>
      
      <div class="path-item completed">
        <div class="path-milestone"></div>
        <div class="path-title">完善个人资料</div>
        <div class="path-desc">上传头像、填写个人简介和兴趣标签</div>
        <div class="path-reward">+50经验值 +完善资料徽章</div>
      </div>
      
      <div class="path-item completed">
        <div class="path-milestone"></div>
        <div class="path-title">发布首条动态</div>
        <div class="path-desc">在平台发布第一条原创内容</div>
        <div class="path-reward">+100经验值 +创作新星徽章</div>
      </div>
      
      <div class="path-item">
        <div class="path-milestone"></div>
        <div class="path-title">内容创作达人</div>
        <div class="path-desc">累计发布20条原创优质内容</div>
        <div class="path-reward">+500经验值 +创作达人徽章 +专属模板</div>
      </div>
      
      <div class="path-item future">
        <div class="path-milestone"></div>
        <div class="path-title">社区活跃分子</div>
        <div class="path-desc">累计获得1000个内容互动量（点赞+评论）</div>
        <div class="path-reward">+1000经验值 +活跃达人徽章 +话题创建权</div>
      </div>
      
      <div class="path-item future">
        <div class="path-milestone"></div>
        <div class="path-title">兴趣领袖</div>
        <div class="path-desc">创建的兴趣小组累计100名成员</div>
        <div class="path-reward">+2000经验值 +领袖勋章 +专属客服</div>
      </div>
    </div>
    
    <h3 class="section-title">本周成长目标</h3>
    <div class="path-container">
      <div class="progress-text mb-3">
        <span>本周进度: 4/7 任务</span>
      </div>
      <div class="progress-bar-container mb-4">
        <div class="exp-bar" style="width: 57%"></div>
      </div>
      
      <div class="path-item completed" style="padding-left: 20px; border-left: none;">
        <div class="path-title" style="font-size: 15px;">发布3条动态</div>
        <div class="path-desc" style="font-size: 13px;">已完成 3/3</div>
      </div>
      
      <div class="path-item completed" style="padding-left: 20px; border-left: none;">
        <div class="path-title" style="font-size: 15px;">参与1次话题讨论</div>
        <div class="path-desc" style="font-size: 13px;">已完成 1/1</div>
      </div>
      
      <div class="path-item" style="padding-left: 20px; border-left: none;">
        <div class="path-title" style="font-size: 15px;">获得20个内容点赞</div>
        <div class="path-desc" style="font-size: 13px;">进行中 12/20</div>
      </div>
      
      <div class="path-reward" style="margin-top: 15px;">
        本周完成所有任务可获得: +300经验值 +周末精选礼包
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="bottom-nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="bottom-nav-item">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="bottom-nav-item active">
      <i class="fa fa-line-chart nav-icon"></i>
      <span>成长</span>
    </a>
    <a href="#" class="bottom-nav-item">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 导航切换功能
    const navItems = document.querySelectorAll('.nav-item');
    const contentSections = document.querySelectorAll('.content-section');
    
    navItems.forEach(item => {
      item.addEventListener('click', function() {
        // 移除所有激活状态
        navItems.forEach(i => i.classList.remove('active'));
        contentSections.forEach(s => s.classList.remove('active'));
        
        // 添加当前激活状态
        this.classList.add('active');
        const tabId = this.getAttribute('data-tab');
        document.getElementById(tabId).classList.add('active');
      });
    });
    
    // 任务按钮功能
    const taskButtons = document.querySelectorAll('.task-action.btn-get');
    taskButtons.forEach(button => {
      button.addEventListener('click', function() {
        const taskTitle = this.closest('.task-card').querySelector('.task-title').textContent;
        const expText = this.textContent;
        const exp = expText.match(/\d+/)[0];
        
        // 更改按钮状态
        this.textContent = '已完成';
        this.classList.remove('btn-get');
        this.classList.add('btn-complete');
        
        // 更新经验值和进度条
        updateExperience(exp);
        
        // 显示提示
        alert(`恭喜！完成【${taskTitle}】获得${exp}经验值`);
      });
    });
    
    // 更新经验值和进度条
    function updateExperience(change) {
      // 获取当前经验值和目标值
      const expText = document.querySelector('.progress-text span').textContent;
      const [currentExp, targetExp] = expText.match(/\d+/g).map(Number);
      
      // 计算新经验值
      let newExp = currentExp + parseInt(change);
      const maxExp = targetExp;
      
      // 更新显示文本
      document.querySelector('.progress-text span').textContent = 
        `当前经验: ${newExp.toLocaleString()}/${maxExp.toLocaleString()}`;
      
      // 更新进度条
      const progressBar = document.querySelector('.exp-bar');
      const progressPercent = Math.min((newExp / maxExp) * 100, 100);
      progressBar.style.width = `${progressPercent}%`;
      
      // 更新剩余经验
      const remainingExp = Math.max(maxExp - newExp, 0);
      document.querySelectorAll('.progress-text')[1].querySelector('span').textContent = 
        `距离下一等级还需: ${remainingExp}经验`;
        
      // 检查是否升级
      if (newExp >= maxExp) {
        setTimeout(() => {
          alert('恭喜您升级了！获得新的权限和奖励');
        }, 500);
      }
    }
    
    // 查看更多记录按钮
    document.querySelector('.text-center .btn').addEventListener('click', function() {
      const btn = this;
      btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        btn.innerHTML = '<i class="fa fa-history mr-1"></i> 查看更多记录';
        alert('已加载全部经验记录');
      }, 1500);
    });
    
    // 查看完整等级体系
    document.querySelectorAll('.text-center .btn')[1].addEventListener('click', function() {
      alert('完整等级体系包含1-20级，等级越高特权越多');
    });
  </script>
</body>
</html>
